<template>
  <view class="profile-page">
    <!-- Back button -->
    <view class="back-button" @click="goBack">
    </view>
    <!-- Page title -->

    <!-- Avatar area -->
    <view class="avatar-area">
      <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
    </view>
    <!-- Edit modules -->
    <view class="edit-modules">
      <view class="module-item">
        <text>昵称</text>
        <input placeholder="请输入昵称" />
      </view>
      <view class="module-item">
        <text>手机号</text>
        <input placeholder="请输入手机号" type="number" />
      </view>
      <view class="introdution-item">
        <text class="text1class">简介</text>
        <!-- Use textarea component with autoHeight attribute -->
        <!-- <textarea 
          placeholder="请输入简介" 
          autoHeight 
          class="introduction-textarea"
          maxlength="50"
        /> -->
        <uni-easyinput type="textarea" autoHeight v-model="introduction" placeholder="请输入内容" :maxlength="50"></uni-easyinput>
        <text class="text2class">{{ computedIntroLength }} / 50</text>
      </view>
      <view class="module-item">
        <text>性别</text>
        <picker mode="selector" :range="gender" @change="changeGender">
          <view>请选择性别</view>
        </picker>
      </view>
      <view class="module-item">
        <text>生日</text>
        <picker class="picker" mode="date" start="1900-01-01" :end="new Date()" placeholder="请选择生日"
          @change="changeDate">

          <view>请选择生日</view>
        </picker>
      </view>
      <view class="module-item">
        <text>地区</text>
        <picker mode="region" placeholder="请选择地区" @change="changeRegion">
          <view>请选择地区</view>
        </picker>
      </view>
      <view class="module-item">
        <text>职业</text>
        <input placeholder="请输入职业" />
      </view>
    </view>
    <!-- Save button -->
    <button class="save-button" @click="saveInfo">保存</button>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

import { saveProfileAPI } from '@/service/profile';
import { useMemberStore } from '@/stores';
import type { Gender, ProfileDetail } from '@/types/member';
const memberStore = useMemberStore();

// import { uni } from 'uni-app';
const gender = ['男', '女', '未知']; // Define gender options
const regionData = ref<string[]>(); // Define region data
const dateData = ref<string>(); // Define date data
const genderGender = ref<string>(); // Define gender data
const introduction = ref<string>(''); // Define introduction data
const computedIntroLength = computed(() => {
  return introduction.value.length; // Compute the length of the introduction
});

// Function to go back to the "My" page
const goBack = () => {
  uni.navigateBack();
};


//绑定性别
const changeGender = (e:any) => {
  console.log(e.detail.value);
  genderGender.value = e.detail.value;
}


//绑定地区
const changeRegion = (e:any) => {
  console.log(e.detail.value);
  regionData.value = e.detail.value;
}

//绑定生日
const changeDate = (e:any) => {
  console.log(e.detail.value);
  dateData.value = e.detail.value;
  console.log(dateData.value);
  
}
const saveInfo = async() => {
  try {
   const profileData:ProfileDetail = { 
     gender:genderGender.value as Gender,
     regionData:regionData.value as string[],
     birthday:dateData.value,
     introduction:introduction.value,
     id:memberStore.profile?.id as number,
     phone:memberStore.profile?.phone as string,
   } 
    const res = await saveProfileAPI(profileData)
    uni.showToast({ title: '保存成功' })
  } catch (error) {
    uni.showToast({ title: '保存失败' })}
}

</script>

<style lang="scss" scoped>
.profile-page {
  height: 100vh;
  position: relative;
}

.back-button {
  position: absolute;
  left: 20rpx;
  top: 20rpx;
  font-size: 40rpx;
  padding: 10rpx;
}

.page-title {
  text-align: center;
  font-size: 48rpx;
  font-weight: bold;
  padding: 40rpx 0;
}

.avatar-area {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.edit-modules {
  padding: 0 40rpx;
}

.module-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.introdution-item{
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
  .text1class{
  font-size: 32rpx;
  color: #666;
  margin-bottom: 10rpx; 
  }
  .text2class{
    margin-top: 10rpx;
  }
}

.module-item text {
  width: 200rpx;
  font-size: 32rpx;
}

.module-item input,
.module-item picker view {
  flex: 1;
  font-size: 32rpx;
  color: #666;
}

.save-button {
  margin: 60rpx 40rpx;
  background-color: #007AFF;
  color: white;
}
</style>